<template>
  <div class="ratingList" ref="ratingslist">
    <div class="ratings-wrap" >
      <div class="score-wrap">
        <div class="score-left">
          <p class="score">{{seller.score}}</p>
          <p class="zhpf">综合评分</p>
          <p class="pre">高于周边商家{{seller.rankRate}}%</p>
        </div>
        <div class="score-right">
          <div>
            <p><span>服务态度</span>
              <star :size="36" :score="seller.serviceScore"></star>
              <i class="num">{{seller.serviceScore}}</i>
            </p>
            <p><span>商品评价</span>
              <star :size="36" :score="seller.foodScore"></star>
              <i class="num">{{seller.foodScore}}</i>
            </p>
            <p><span>送达时间</span><span class="time">{{seller.deliveryTime}}分钟</span></p>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="check-ratings">
        <ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="ratings" @ratingType="ratingSelectTypeFn" @changeSwitchP="changeSwitchFn"></ratingselect>
      </div>
      <div class="ratings-list">
        <ul>
          <li v-for="item in ratings" v-show="needshow(item.rateType,item.text)">
            <div class="rating-info">
              <div class="user">
                <img :src="item.avatar" alt="">
                <div class="username">
                  <p>{{item.username}}</p>
                  <span>
                    <star :size="24" :score="item.score" ></star>
                    <span>{{item.deliveryTime}}分钟送达</span>
                  </span>
                </div>
              </div>
              <div class="time">{{item.rateTime | formatDate}}</div>
            </div>
            <div class="rating-text">{{item.text}}</div>
            <div class="recommand" v-show="item.recommend.length && item.recommend">
              <ul>
                <li class="li-dianzhan"><span class="icon-zan" :class="{'dianzan':item.rateType === 0}" ></span></li>
                <li v-for="list in item.recommend">{{list}}</li>
              </ul>
            </div>
            <div class="no-recommand" v-show="!item.text">暂无评价</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  import star from '../../components/star/star.vue';
  import ratingselect from '../../components/ratingselect/ratingselect.vue';
  import BScroll from 'better-scroll';
  import {formatDate} from '../../components/commit/date.js';
//  import shopcar from '../../components/shopcar/shopcar.vue'


  const POSITIVE = 0;
  const NEGATIVE = 1;
  const ALL = 2;
  const ERR_OK = 0;
  //  import
  export default{
    props: {
      seller: {
        seller: Object
      }
    },
    data(){
      return {
        ratings: [],
        showFlag: false,
        selectType: ALL,
        onlyContent: false,
        desc: {
          all: '全部',
          positive: '满意',
          neigative: '不满意'
        }
      }
    },
    methods: {
      ratingSelectTypeFn(type){
        this.selectType = type;
        this.$nextTick(()=>{
          this.scroll.refresh();
        });
        console.log(this.selectType)
      },
      changeSwitchFn(status){
        if (this.onlyContent === status) {
          this.onlyContent = !status
        } else {
          this.onlyContent = status
        }
        this.$nextTick(()=>{
          this.scroll.refresh();
        });
        console.log(this.onlyContent);
      },
      needshow(type,text){
        if(this.onlyContent && !text){
          return false;
        }
        if(this.selectType === ALL){
          return true;
        }else{
          return type === this.selectType;
        }
      }
    },
    created(){
      this.$http.get('/api/ratings').then((res)=> {
        res = res.body;
        if (res.errno === ERR_OK) {
          this.ratings = res.data;
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new BScroll(this.$refs.ratingslist, {
                click: true
              })
            }else {
              this.scroll.refresh();
            }
          })
        }
      }, (req)=> {

      });
    },
    filters:{
      formatDate(time) {
        //js模块
        let date = new Date(time);
        return formatDate(date,'yyyy-MM-dd hh:ss');
      }
    },
    components: {
      star,
      ratingselect
//      shopcar
    }
  }
</script>

<style>
  .ratingList{position: absolute;top: 174px;left: 0;width: 100%;overflow: hidden;bottom:0px}
  .score-wrap{display: flex;padding: 18px 0;}
  .score-left{width: 137px;flex: 0 0 137px;border-right: 1px solid #eaeaea;text-align: center;}
  .score-right{flex: 1;padding-left: 24px;}
  .score-left .score{font-size: 26px;color: #ff9900;padding-bottom: 10px;}
  .score-left .zhpf{font-size: 16px;font-weight: bold;padding-bottom: 10px;}
  .score-left .pre{font-size: 12px;color: #93999f;padding-bottom: 10px;}
  .score-right p{padding: 5px 0;}
  .score-right p span{font-size: 14px;padding: 5px;}
  .score-right .time{color: #93999f;font-size: 12px;}
  .line{width: 100%;height: 18px;background-color: #f3f5f7;border-top: 1px solid #e6e7e8;border-bottom: 1px solid #e6e7e8;}
  .check-ratings{border-bottom: 1px solid #eaeaea;padding: 20px;padding-bottom: 0;}
  .ratingList .rating-type{padding-bottom: 20px;border-bottom: 1px solid #eaeaea;}
  .score-right i.num{font-style: normal;font-size: 12px;color: #ff9900;}
  @media only screen and (max-width: 320px){}
  /*点赞*/.icon-zan{margin-right: 5px;vertical-align: middle;display: inline-block;width: 20px;height:20px;background:url(no.png) no-repeat;background-size:20px;}
  .dianzan{background:url(yes.png) no-repeat;background-size:20px;}
  .rating-info{overflow: hidden;clear: both;}
  .ratings-list ul li{padding:18px 0px;border-bottom: 1px solid #eaeaea;margin:0 14px;}
  .rating-info .user{display: inline-block;height: 40px;width:auto;}
  .rating-info .user img{display: inline-block;width:40px;height:40px;border-radius: 50%;float: left;margin-right: 10px;}
  .rating-info .username{float: left;height:40px;font-size: 12px;}
  .rating-info .username p{width:auto;height:20px;}
  .rating-info .username span span{color: #93999f;}
  .rating-info .time{float: right;display: inline-block;width:auto;height:40px;line-height:40px;font-size: 12px;color: #93999f;}
  .rating-text{padding:5px 0;padding-left:50px;line-height:20px;font-size: 14px;}
  .ratings-list .recommand{padding:5px 0;padding-left:50px;}
  .ratings-list .recommand ul{width: 100%;overflow: hidden;clear: both;}
  .ratings-list .recommand ul li.li-dianzhan{width:auto;border: none;padding:0;margin:0;margin-top: 8px;}
  .ratings-list .recommand ul li{display: inline-block;padding:0;width:55px;height:16px;line-height:16px;float: left;font-size: 12px;padding:3px;color:#93999f ;border: 1px solid #e6e7e8;text-align: center;overflow: hidden;margin: 5px;text-overflow: ellipsis;white-space:nowrap;}
  .ratings-list .no-recommand{padding:5px 0;padding-left:50px;font-size: 12px;}
</style>
